<template>
  <div>
    <div class="header">
    </div>
    <div class="title">
      {{this.nows.title}}
    </div>
    <div class="main_box">
      <div class="zhezhao" v-if="!nows.id > 0">
        <p>加载中  <i>......</i></p>
      </div>
      <div class="main_header">
        <div class="main_header_intro">
          <span class="iconfont">{{'&#xe693;' + '&nbsp;' + this.nows.viewSize + '次浏览'}}</span>
          <span class="iconfont">{{'&#xe61b;' + '&nbsp;' + '评论(' + this.nows.commentSize + ')'}}</span>
          <span class="iconfont">时间：{{this.nows.updateTime | changeDate}}</span>
          <span class="iconfont">
            发布人：
            <span class="user"
              :title="nows.nickname"
              :name="nows.username"
              @click="userView">
              {{this.nows.nickname}}
            </span>
          </span>
        </div>
      </div>
      <div class="main" v-html="nows.content"></div>
      <div class="talkub">
        <div class="talkubs">
          <div class="up iconfont" @click="zan">
            {{'&#xe605;' + '&nbsp;' + '赞' + '&nbsp;' + '(' + this.nows.zanSize + ')'}}
          </div>
        </div>
      </div>
      <div class="class">
        文章标签：{{this.nows.tags}}
      </div>
    </div>
  </div>
</template>

<script>
import { clickZan } from 'com/shuju'
import { formatDate } from 'com/data'
import { mapState } from 'vuex'
export default {
  name: 'ArticalHeader',
  data () {
    return {
    }
  },
  methods: {
    userView () {
      var names = event.target.getAttribute('name')
      this.$store.commit('changeHomeTf', 2)
      this.$router.push({
        path: '/Myhome/article',
        query: {
          name: names
        }
      })
    },
    zan () {
      var datas = new FormData()
      datas.set('articleId', this.$route.query.id)
      clickZan(datas, this)
    }
  },
  filters: {
    changeDate: function (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  computed: {
    ...mapState({
      nows: 'nowArticals'
    })
  },
  mounted () {
    scroll(0, 0)
  }
}
</script>

<style lang="stylus" scoped>
  .header{
    position: relative
    margin-left: 0
    margin-top: .5rem
    width: 1100px
    height: 50px
    background-color: rgb(255,255,255)
  }
  .title{
    border-right: 5px solid rgb(15,113,213)
    border-left: 5px solid rgb(15,113,213)
    line-height: 50px
    font-size: .53rem
    font-weight: 450
    text-align: center
    position: relative
    margin-left: 0
    width: 1090px
    height: 50px
  }
  .main_box{
    position: relative
    margin: 0
    margin-left: 0
    width: 1100px
    height: auto
    background-color: rgb(255,255,255)
    .zhezhao{
      position: absolute
      width: 100%
      height: 100%
      z-index: 5
      background-color: rgb(230,230,230)
      p{
        font-size: .6rem
        color: rgb(120,120,120)
        font-weight: bold
        margin: 20% 0
        text-align: center
      }
      i{
        animation: 1.5s linear infinite loading
      }
      @keyframes  loading {
        0%{
          opacity: 1
        }
        25%{
          opacity: .5
        }
        50%{
          opacity: 0
        }
        75%{
          opacity: .5
        }
        100%{
          opacity: 1
        }
      }
    }
    .talkub{
      width: 100%
      height: 80px
      background: rgb(255,255,255)
      .talkubs{
        width: 430px
        height: calc(100% - .35rem)
        margin: 0 auto
        padding-top: .35rem
        .up{
          font-size: .5rem
          margin: 0 auto
          text-align: center
          color: red
          line-height: 40px
          width: 150px
          height: 40px
          border: 1px solid red
          border-radius: 24px
          cursor: pointer
      }
      }
    }
    .class{
      position: relative
      margin: 0
      margin-left: 0
      padding-top: .3rem
      padding-left: .3rem
      border-top: 1px solid rgb(220,220,220)
      width: calc(800px -.3rem)
      height: 40px
      color: rgb(60,60,60)
    }
    .main_header{
      position: relative
      width: 100%
      height: 80px
      background-color: rgb(255,255,255)
      .main_header_intro{
        position: absolute
        height: 30px
        width: 94.5%
        margin: 0
        left: .6rem
        bottom: .2rem
        border-bottom: 1px solid rgb(210,210,210)
        span + span {
          margin-left: .3rem
        }
        .user{
          color: rgb(15,153,213)
          cursor: pointer
        }
        .user:hover{
          color: rgb(15,103,213)
        }
      }
    }
    .main{
      width: 94%
      min-height: 300px
      padding-left: .6rem
      padding-top: .4rem
      padding-right: .3rem
      padding-bottom: .4rem
    }
  }
</style>
